<template>
  <el-dialog :title="title" :visible="showDialog" @close="close">
    <el-form ref="form" :model="form" :label-width="formLabelWidth">
      <el-form-item label="模板类型">
        <el-select v-model="form.templateType" placeholder="请选择运送类型">
          <el-option
            v-for="item in templateTypeOptionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运送类型">
        <el-select v-model="form.transportType" placeholder="请选择运送类型">
          <el-option
            v-for="item in transportTypeOptionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关联城市">
        <template #default>
          <el-checkbox-group v-model="associatedCityCheckList">
            <el-checkbox
              v-for="item in form.associatedCityList"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-form-item>
      <el-form-item label="首重价格">
        <el-input
          v-model.number="form.firstWeight"
          placeholder="请输入首重价格"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="续重价格">
        <el-input
          v-model.number="form.continuousWeight"
          placeholder="请输入续重价格"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="轻抛系数">
        <el-input
          v-model="form.lightThrowingCoefficient"
          placeholder="请输入轻抛系数"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addOrUpdateCarriages } from '@/api/carriages'
import {
  getAssociatedCityText,
  getAssociatedCityList
} from '@/utils/freight-data'

export default {
  name: 'FreightDialog',
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: '新增模板'
    },
    // 是否显示弹窗
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formLabelWidth: '120px',
      // 模板类型下拉列表
      templateTypeOptionList: [
        {
          label: '同城寄',
          value: 1
        },
        {
          label: '省内寄',
          value: 2
        },
        {
          label: '经济区互寄',
          value: 3
        },
        {
          label: '跨省',
          value: 4
        }
      ],
      // 运送类型下拉列表
      transportTypeOptionList: [
        {
          label: '普快',
          value: 1
        },
        {
          label: '特快',
          value: 2
        }
      ],
      // 表单数据
      form: {
        // 模板类型
        templateType: '',
        // 运送类型
        transportType: '',
        // 关联城市
        associatedCityList: getAssociatedCityList(),
        // 首重价格
        firstWeight: '',
        // 续重价格
        continuousWeight: '',
        // 轻抛系数
        lightThrowingCoefficient: ''
      },
      // 关联城市，多选Id列表
      associatedCityCheckList: []
    }
  },
  methods: {
    getAssociatedCityText,
    // 切换为编辑模式
    switchEditMode(row) {
      // 数据回填，深拷贝
      this.form = { ...row }
      // 回显关联城市多选
      console.log(row.associatedCityList, Array.isArray(row.associatedCityList))
      this.associatedCityCheckList = [...row.associatedCityList]
      this.form.associatedCityList = getAssociatedCityList()
    },
    async confirm() {
      try {
        // 表单校验
        await this.$refs.form.validate()
        console.log('表单校验 => 成功')
        const result = await addOrUpdateCarriages(this.form)
        this.$$message.success('添加模板成功')
        console.log(result)
        // 关闭弹窗
        this.close()
      } catch (e) {
        console.log('表单校验 => 失败', e)
      }
    },
    close() {
      // 重置表单
      this.$refs.form.resetFields()
      // 重置表单数据
      this.form = {
        computeWeight: '',
        continuousWeight: '',
        created: '',
        expense: '',
        firstWeight: '',
        id: null,
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: '',
        associatedCityList: getAssociatedCityList(),
        updated: ''
      }
      this.associatedCityCheckList = []
      // 关闭弹窗
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
